<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
    <!--    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>-->
    <script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
    <script>
        $(function () {
            $("img").click(function () {
                // attr(属性名):获取指定属性的属性值
                console.log("src属性:" + $(this).attr("src"));
                console.log("alt属性:" + $(this).attr("alt"));
                console.log("title属性:" + $(this).attr("title"));
                console.log("自定义id属性:" + $(this).attr("data-id"));
                console.log("自定义name属性:" + $(this).attr("data-name"));
            });
            $("input").blur(function () {
                console.log("type属性:" + $(this).attr("type"))
                console.log("id属性:" + $(this).attr("id"))
                console.log("value属性:" + $(this).attr("value"))
            });
            $("input[name='hobbies']").click(function () {
                // prop语法是在jquery1.9引入的,一般用于表单元素
                console.log("type属性:" + $(this).prop("type"))
                console.log("name属性:" + $(this).prop("name"))
                console.log("value属性:" + $(this).prop("value"))

            });
        })
    </script>
</head>
<body>
<!--
    在实际开发中,所有的自定义属性一般不会随便写
    一般遵循data-xxx
-->
<img src="../images/heihei.gif" alt="图片加载失败" title="今天天气还行" data-id="1" data-name="admin">
<input type="text" id="inText" value="admin"/>
<input type="checkbox" name="hobbies" value="eat">
</body>
</html>